<template>
  <div class="app-container">
    <div class="info-title">外部信息</div>
    <table>
      <tr>
        <td style="width: 10%">成立日期</td>
        <td style="width: 20%">{{ info.FOUND_DT }}</td>
        <td style="width: 10%">经营状态</td>
        <td style="width: 20%">{{ info.ORIG_COMPANY_ST }}</td>
        <td style="width: 10%">组织机构代码</td>
        <td style="width: 20%" />
      </tr>
      <tr>
        <td>工商注册号</td>
        <td>{{ info.BLNUMB }}</td>
        <td>统一社会信用代码</td>
        <td>{{ info.ORGNUM }}</td>
        <td>纳税人识别号</td>
        <td>{{ info.ORGNUM || '-' }}</td>
      </tr>
      <tr>
        <td>注册资本</td>
        <td>{{ info.REG_CAPITAL }}万{{ currencyNameMap[info.CURRENCY] }}</td>
        <td>实缴资本</td>
        <td>{{ info.ACTUAL_CAPITAL }}万{{ currencyNameMap[info.CURRENCY] }}</td>
        <td>法定代表人</td>
        <td>{{ info.LEG_REPRESENT }}</td>
      </tr>
      <tr>
        <td>企业性质</td>
        <td>{{ info.ORIG_ORG_FORM }}</td>
        <td>所属行业</td>
        <td>{{ }}</td>
        <td>登记机关</td>
        <td>{{ info.REG_GOV }}</td>
      </tr>
      <tr>
        <td>核准日期</td>
        <td>{{ info.REG_DT }}</td>
        <td>营业期限</td>
        <td>{{ info.START_DT || '-' }} 至 {{ info.END_DT || '无固定期限' }}</td>
        <td>员工总数</td>
        <td>{{ info.EMPLOY_NUM || '-' }}</td>
      </tr>
      <tr>
        <td>联系电话</td>
        <td>{{ info.COMPANY_PH }}</td>
        <td>公司网址</td>
        <td>{{ info.COMPANY_WEB || '-' }}</td>
        <td>注册地址</td>
        <td>{{ info.REG_ADDR || '-' }}</td>
      </tr>
      <tr>
        <td>经营范围</td>
        <td colspan="5">{{ info.BUSIN_SCOPE }}</td>
      </tr>
    </table>

    <div class="info-title mt20">
      <span>内部信息</span>
      <el-button v-hasPermi="['client:service:update']" type="primary" icon="el-icon-edit" size="mini" class="extra" @click="handleUpdate">更新</el-button>
    </div>
    <table>
      <tr>
        <td style="width: 10%">客户名称</td>
        <td style="width: 20%">{{ innerInfo.name }}</td>
        <td style="width: 10%">企业地址</td>
        <td style="width: 20%">{{ innerInfo.address || '--' }}</td>
        <td style="width: 10%">业务类型</td>
        <td style="width: 20%">
          <el-tag
            v-for="item in (innerInfo.busiType || '').split(',')"
            :key="item"
            :type="getDictClass('sys_business_type', item)"
            size="mini"
            class="busi-tag"
          >{{ dict.label.sys_business_type[item] }}</el-tag>
        </td>
      </tr>
      <tr>
        <td>联系人</td>
        <td>{{ innerInfo.linkName || '--' }}</td>
        <td>联系电话</td>
        <td>{{ innerInfo.linkTel || '--' }}</td>
        <td>备注</td>
        <td>{{ innerInfo.remark }}</td>
      </tr>
    </table>

    <el-dialog title="修改客户信息" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="客户名称" prop="corp">
          <el-input v-model="form.name" disabled />
        </el-form-item>
        <el-form-item label="企业地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入企业地址" />
        </el-form-item>
        <el-form-item label="业务类型" prop="busiType">
          <el-select
            v-model="form.busiType"
            multiple
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.sys_business_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="联系人">
          <el-input v-model="form.linkName" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.linkTel" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getClient, updateClient } from '@/api/client/client'

export default {
  name: 'InfoCard',
  props: {
    corpId: {
      type: String,
      required: true
    },
    // 企业外部信息
    info: {
      type: Object,
      default: () => ({})
    }
  },
  dicts: ['sys_business_type'],
  data() {
    return {
      // 企业内部信息
      innerInfo: {},
      currencyNameMap: {
        RMB: '人民币'
      },

      open: false,
      form: {},
      rules: {
        type: [
          { required: true, message: '类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    corpId: {
      immediate: true,
      handler(val) {
        if (val) this.getClient()
      }
    }
  },
  methods: {
    async getClient() {
      getClient(this.corpId).then(response => {
        this.innerInfo = response.data
      })
    },
    handleUpdate() {
      this.form = {
        ...this.innerInfo,
        busiType: this.innerInfo.busiType.split(',')
      }
      this.open = true
    },
    cancel() {
      this.open = false
    },
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const formData = {
            ...this.form,
            busiType: (this.form.busiType || []).join(',')
          }
          updateClient(formData).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.getClient()
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.info-title {
  position: relative;
  font-size: 14px;
  color: $label-color;
  line-height: 26px;
  padding-left: 10px;
  margin-bottom: 10px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 0;
    width: 3px;
    background-color: $primary-color;
    border-radius: 3px;
  }
  .extra {
    margin-left: 20px;
  }
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid $border-color;
}
tr td {
  padding: 8px 8px;
  border-left: 1px solid $border-color;
  border-top: 1px solid $border-color;
}
tr td:nth-child(2n+1) {
  background-color: $background-color;
  text-align: center;
}
.busi-tag+.busi-tag {
  margin-left: 10px;
}
</style>
